<template>
  <div class="admin-layout">
    <!-- 左侧菜单栏 -->
    <div class="sidebar" :class="{ collapsed: isCollapse }">
      <div class="logo-area">
        <h2 v-if="!isCollapse">EduAdmin</h2>
        <span v-else>EA</span>
      </div>
      <el-scrollbar>
        <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical"
          background-color="transparent"
          text-color="rgba(255, 255, 255, 0.9)"
          active-text-color="#fff"
          :collapse="isCollapse"
          :collapse-transition="false"
          :router="true"
        >
          <template v-for="item in menuItems" :key="item.path">
            <!-- 有子菜单的项 -->
            <el-sub-menu v-if="item.children" :index="item.path">
              <template #title>
                <el-icon>
                  <component :is="item.icon" />
                </el-icon>
                <span>{{ item.title }}</span>
              </template>
              <el-menu-item
                v-for="subItem in item.children"
                :key="subItem.path"
                :index="subItem.path"
              >
                <el-icon>
                  <component :is="subItem.icon" />
                </el-icon>
                <span>{{ subItem.title }}</span>
              </el-menu-item>
            </el-sub-menu>

            <!-- 无子菜单的项 -->
            <el-menu-item v-else :index="item.path">
              <el-icon>
                <component :is="item.icon" />
              </el-icon>
              <span>{{ item.title }}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </el-scrollbar>

      <!-- 折叠按钮 -->
      <div class="collapse-btn" @click="toggleCollapse">
        <el-icon>
          <component :is="isCollapse ? 'Expand' : 'Fold'" />
        </el-icon>
      </div>
    </div>

    <!-- 右侧主区域 -->
    <div class="main-container">
      <!-- 顶部导航栏 -->
      <div class="header">
        <div class="header-left">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item
              v-for="(item, index) in breadcrumbList"
              :key="index"
            >
              {{ item.meta.title }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <div class="header-right">
          <div class="user-actions">
            <el-dropdown>
              <div class="user-info">


                <el-avatar :size="32" :src="userInfo.avatar" />
                <span class="username">{{ userInfo.name }}</span>
                <el-icon><arrow-down /></el-icon>
              </div>

              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="goToProfile">
                    <el-icon><user /></el-icon>个人中心
                  </el-dropdown-item>
                  <el-dropdown-item @click="goToSettings">
                    <el-icon><SetUp /></el-icon>设置
                  </el-dropdown-item>
                  <el-dropdown-item divided @click="handleLogout">
                    <el-icon><switch-button /></el-icon>退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>

            <el-tooltip content="全屏" placement="bottom">
              <el-icon :size="20" @click="toggleFullScreen">
                <full-screen />
              </el-icon>
            </el-tooltip>
          </div>
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="content">
        <div class="content-wrapper">
          <!-- 路由视图 -->
          <router-view v-slot="{ Component }">
            <transition name="fade-transform" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessageBox, ElMessage } from "element-plus";
import {
  HomeFilled,
  User,
  Setting,
  Document,
  DataAnalysis,
  Expand,
  Fold,
  Menu as IconMenu,
  Goods,
  Monitor,
  ChatLineRound,
  ArrowDown,
  Bell,
  SwitchButton,
  FullScreen,
  SetUp,
  MagicStick,
  Plus,
  Tickets,
  DataBoard,
  Clock,
  ChatDotRound,
} from "@element-plus/icons-vue";

export default {
  components: {
    User,
    FullScreen,
    SetUp,
    SwitchButton,
    MagicStick,
    Plus,
    Tickets,
    DataBoard,
    Clock,
    ChatDotRound,
  },
  setup() {
    // 获取本地存储的userinfo
    const userinfo = localStorage.getItem("userinfo");
    const asd = JSON.parse(userinfo);
    console.log(asd);

    //路由相关
    const route = useRoute();
    const router = useRouter();

    const isCollapse = ref(false);
    const messageCount = ref(5);

    // 用户信息
    // 获取userinfo，如果不存在则使用空对象
    const storedUserInfo = JSON.parse(localStorage.getItem("userinfo") || "{}");

    // 用户信息
    const userInfo = ref({
      name: storedUserInfo.username || "未知用户",
      avatar:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      role: storedUserInfo.role || "guest",
    });

// 菜单数据
const baseMenuItems = [
  {
    title: '首页',
    path: '/index/',
    icon: HomeFilled,
    meta: { title: '首页' },
    // roles: ['admin', 'student', 'teacher'] // 所有角色可见
  },
  {
    title: '教师页面',
    path: '/content',
    icon: Document,
    meta: { title: '内容管理' },
    // roles: ['admin', 'student', 'teacher'],
    children: [
      {
        title: '我的课程',
        path: '/index/content/',
        icon: Document,
        // roles: ['student', 'teacher']
      },
      {
        title: '我的页面1',
        path: '/index/all-wwk',
        icon: Document,
        // roles: ['teacher']
      },
      {
        title: '我的页面2',
        path: '/index/all-articles',
        icon: Document,
        // roles: ['teacher']
      },
      {
        title: '课程申请',
        path: '/index/deal_course',
        icon: Document,
        // roles: ['teacher']
      },
    ]
  },
  {
    title: '学校课程',
    path: '/index',
    icon: Monitor,
    meta: { title: '学校课程' },
    children: [
      {
        title: '课程列表',
        path: '/index/student_course',
        icon: Document,
        // roles: ['student', 'teacher']
      },
      {
        title: '我的课程',
        path: '/index/student_my_course',
        icon: Document,
        // roles: ['student', 'teacher']
      },

    ]
  },
   {
        title: '小组讨论',
        path: '/index/question',
        icon: ChatLineRound,
      },
  {
    title: '用户管理',
    path: '/index',
    icon: User,
    meta: { title: '用户管理' },
    // roles: ['admin'],
    children: [
      {
        title: '用户列表',
        path: '/index/user-management',
        icon: User
      }
    ]
  }
];

    const menuItems = computed(() => {
      const currentRole = userInfo.value.role;

      return baseMenuItems
        .filter((item) => {
          if (!item.roles) return true;
          return item.roles.includes(currentRole);
        })
        .map((item) => {
          const newItem = { ...item };

          if (newItem.children) {
            newItem.children = newItem.children.filter((child) => {
              if (!child.roles) return true;
              return child.roles.includes(currentRole);
            });
          }

          return newItem;
        })
        .filter((item) => !item.children || item.children.length > 0);
    });




    // 当前激活的菜单
    const activeMenu = computed(() => {
      return route.path;
    });

    // 面包屑导航
    const breadcrumbList = computed(() => {
      const matched = route.matched.filter(
        (item) => item.meta && item.meta.title
      );
      return matched;
    });

    // 切换菜单折叠状态
    const toggleCollapse = () => {
      isCollapse.value = !isCollapse.value;
    };

    // 退出登录
    const handleLogout = () => {
      ElMessageBox.confirm("确定要退出登录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 这里添加退出登录的逻辑
          // 清除token等信息
          localStorage.removeItem("token");
          localStorage.removeItem("userinfo");
          router.push("/");
          ElMessage.success("退出成功");
        })
        .catch(() => {});
    };

    // 跳转到个人中心
    const goToProfile = () => {
      router.push("/profile");
    };

    // 跳转到设置
    const goToSettings = () => {
      router.push("/settings");
    };

    // 全屏切换
    const toggleFullScreen = () => {
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen();
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        }
      }
    };

    const quickAction = (action) => {
      switch (action) {
        case "createCourse":
          router.push("/course/create");
          break;
        case "manageUsers":
          router.push("/user-management");
          break;
        case "assignments":
          router.push("/assignments");
          break;
        case "reports":
          router.push("/reports");
          break;
      }
    };

    return {
      isCollapse,
      messageCount,
      userInfo,
      menuItems,
      activeMenu,
      breadcrumbList,
      toggleCollapse,
      handleLogout,
      goToProfile,
      goToSettings,
      toggleFullScreen,
      quickAction,
    };
  },
};
</script>

<style scoped>
.admin-layout {
  display: flex;
  min-height: 100vh;
  position: relative;
}

/* 侧边栏样式 */
.sidebar {
  width: 260px;
  background: linear-gradient(180deg, #4e73ff 0%, #6c5ce7 100%);
  color: white;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.sidebar.collapsed {
  width: 64px;
}

.sidebar.collapsed .logo-area h2 {
  display: none;
}

.sidebar.collapsed .logo-area span {
  display: block;
  font-size: 22px;
  font-weight: 700;
  background: linear-gradient(90deg, #fff 0%, #e0e7ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo-area {
  padding: 20px 15px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-area h2 {
  font-weight: 700;
  font-size: 22px;
  background: linear-gradient(90deg, #fff 0%, #e0e7ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}

.logo-area span {
  display: none;
}

.el-scrollbar {
  flex: 1;
  padding: 10px 0;
}

.el-menu {
  border: none !important;
  background: transparent !important;
}

.el-menu-item,
.el-sub-menu__title {
  height: 50px;
  line-height: 50px;
  margin: 5px 10px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9) !important;
}

.el-menu-item:hover,
.el-sub-menu__title:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.el-menu-item.is-active {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  font-weight: 500;
}

.el-sub-menu .el-menu-item {
  background-color: transparent !important;
  margin: 0;
  border-radius: 0;
}

.el-sub-menu .el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.collapse-btn {
  padding: 15px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s;
}

.collapse-btn:hover {
  color: white;
  background-color: rgba(255, 255, 255, 0.05);
}

/* 主内容区域 */
.main-container {
  flex: 1;
  margin-left: 260px;
  transition: margin-left 0.3s;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.sidebar.collapsed ~ .main-container {
  margin-left: 64px;
}

/* 顶部导航 */
.header {
  height: 70px;
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 25px;
  position: sticky;
  top: 0;
  z-index: 999;
}

.el-breadcrumb {
  font-size: 15px;
}

.user-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 8px;
  transition: background-color 0.2s;
}

.user-info:hover {
  background-color: #f5f7fb;
}

.username {
  margin: 0 8px;
  font-weight: 500;
  color: #2d3436;
}

/* 内容区域 */
.content {
  flex: 1;
  padding: 25px;
  background-color: #f5f7fb;
}

.content-wrapper {
  background: transparent;
}

/* 欢迎卡片 */
.welcome-card {
  background: linear-gradient(120deg, #4e73ff, #6c5ce7);
  color: white;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 25px;
  box-shadow: 0 5px 15px rgba(78, 115, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.welcome-card::before {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  width: 150px;
  height: 150px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.welcome-card h2 {
  font-size: 24px;
  margin-bottom: 10px;
  font-weight: 600;
}

.welcome-card p {
  opacity: 0.9;
  max-width: 600px;
}

/* 统计卡片网格 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 25px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s, box-shadow 0.3s;
  border-left: 4px solid #4e73ff;
  position: relative;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.07);
}

.stat-card:nth-child(2) {
  border-left-color: #00b894;
}

.stat-card:nth-child(3) {
  border-left-color: #fdcb6e;
}

.stat-card:nth-child(4) {
  border-left-color: #d63031;
}

.stat-card .value {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 5px;
  color: #2d3436;
}

.stat-card .label {
  color: #718096;
  font-size: 14px;
  font-weight: 500;
}

.stat-card .icon {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 24px;
  opacity: 0.2;
}

/* 快速访问区域 */
.quick-actions {
  background: white;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 25px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #2d3436;
  display: flex;
  align-items: center;
}

.section-title i {
  margin-right: 10px;
  color: #4e73ff;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 15px;
  background: #f8fafc;
  border-radius: 10px;
  transition: all 0.3s;
  cursor: pointer;
}

.action-item:hover {
  background: #4e73ff;
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(78, 115, 255, 0.2);
}

.action-item:hover .action-icon {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.action-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4e73ff;
  color: white;
  font-size: 20px;
  margin-bottom: 12px;
  transition: all 0.3s;
}

.action-title {
  font-weight: 500;
  font-size: 14px;
  text-align: center;
}

/* 最近活动 */
.recent-activity {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.activity-list {
  margin-top: 15px;
}

.activity-item {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid #edf2f7;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  flex-shrink: 0;
}

.activity-content {
  flex: 1;
}

.activity-title {
  font-weight: 500;
  margin-bottom: 5px;
}

.activity-time {
  font-size: 12px;
  color: #718096;
}

/* 过渡动画 */
.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: all 0.3s;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 响应式设计 */
@media (max-width: 992px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.collapsed {
    transform: translateX(0);
    width: 260px;
  }

  .main-container {
    margin-left: 0 !important;
  }

  .sidebar.mobile-open {
    transform: translateX(0);
  }
}
</style>
